<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    //检测是否所有通过
    var isPass = true;

    window.onload = function () {
        var inputArr = document.getElementById("formDiv").getElementsByTagName("input");
        for (var i = 0; i < inputArr.length; i++) {
                inputArr[i].onblur = function () {
                    check(this);
                }
        }
    }
    function $(id) {
        return document.getElementById(id);
    }


    function checkValue(onblurObj, spanId, rex, warning) {
        var spanObj = document.getElementById(spanId)
        if (rex.test(onblurObj.value)) {
            spanObj.innerHTML = "验证通过";
            spanObj.style.color = "green";
        } else {
            spanObj.innerHTML = warning;
            spanObj.style.color = "red";
            isPass = false;
        }
    }

    function check(onblurObj) {
        if (onblurObj.id === "userName") {
            checkValue(onblurObj, "nameSpan", /^[a-zA-Z]{2,20}$/, "用户名必须是2-20个字母");
        } else if (onblurObj.id === "password") {
            checkValue(onblurObj, "passwordSpan", /^\d{6}$/, "密码必须是6位数字");
        } else if (onblurObj.id === "email") {
            checkValue(onblurObj, "emailSpan", /^\S{2,}@[a-z]{2,}.com$/, "电子邮件必须是XX@XX.com格式");
        } else if (onblurObj.id === "phone") {
            checkValue(onblurObj, "phoneSpan", /^1[358]\d{9}$/, "电话号码必须是13、15、18开始的11位数字");
        } else if (onblurObj.id === "birthday") {
            checkValue(onblurObj, "birthdaySpan", /\d{4}-\d{2}-\d{2}/, "生日为XXXX-XX-XX");
        }
    }

    function submitForm() {
        if (isPass) {
            //提交表单
            $("formDiv").submit();
        }
    }


    // function checkName() {
    //     var rex = /^[a-zA-Z]{2,20}$/;
    //     if (rex.test($("userName").value)) {
    //         $("nameSpan").innerHTML = "验证通过";
    //         $("nameSpan").style.color = "green";
    //     } else {
    //         $("nameSpan").innerHTML = "用户名必须是2-20个字母";
    //         $("nameSpan").style.color = "red";
    //     }
    // }
    //
    // function checkPassword() {
    //     var rex = /^\d{6}$/
    //     if (rex.test($("password").value)) {
    //         $("passwordSpan").innerHTML = "验证通过";
    //         $("passwordSpan").style.color = "green";
    //     } else {
    //         $("passwordSpan").innerHTML = "密码必须是6位数字";
    //         $("passwordSpan").style.color = "red";
    //     }
    // }
    //
    // function checkEmail() {
    //     var rex = /^\S{2,}@[a-z]{2,}.com$/
    //     if (rex.test($("email").value)) {
    //         $("emailSpan").innerHTML = "验证通过";
    //         $("emailSpan").style.color = "green";
    //     } else {
    //         $("emailSpan").innerHTML = "电子邮件必须是XX@XX.com格式";
    //         $("emailSpan").style.color = "red";
    //     }
    // }
</script>

<body>
<form id="formDiv">
    用户名：<input type="text" name="userName" id="userName">
    <span id="nameSpan"></span><br>
    密码：<input type="password" name="password" id="password">
    <span id="passwordSpan"></span><br>
    邮箱：<input type="email" name="email" id="email">
    <span id="emailSpan"></span><br>
    电话：<input type="text" name="phone" id="phone">
    <span id="phoneSpan"></span><br>
    生日：<input type="text" name="birthday" id="birthday">
    <span id="birthdaySpan"></span><br>
    <input type="button" value="提交" onclick="submitForm()">
</form>

</body>
</html>